<template>
  <div id="data-inner">
    <div class="data-box data-box-135cdf">
      <p class="data-count" title="673">
        673
      </p>
      <p class="data-category">停车场总数 </p>
    </div>
    <div class="data-box data-box-4b3fae">
      <p class="data-count" title="241,724">
        241,724
      </p>
      <p class="data-category">停车位总数</p>
    </div>
    <div class="data-box data-box-365bbe">
      <p class="data-count" title="10,948,549">
        10,948,549
      </p>
      <p class="data-category">停车总次数</p>
    </div>
    <div class="data-box data-box-4e989e">
      <p class="data-count" title="15,485">
        15,485
      </p>
      <p class="data-category">消费总金额</p>
    </div>
    <div class="data-box data-box-732ac5">
      <p class="data-count" title="256">
        256
      </p>
      <p class="data-category">维护总次数</p>
    </div>
    <div class="data-box data-box-a51f9a">
      <p class="data-count" title="38,326">
        38,326
      </p>
      <p class="data-category">用户总数</p>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
#data-inner{
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px -20px;
}
.data-count{
  line-height: 55px;
  font-size: 30px;
  text-align:center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
.data-category{
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%);
  font-size: 12px;
  white-space: nowrap;
  cursor: default;
}
.data-box-135cdf{
  background:url('../../../assets/images/1bg.png') no-repeat;
}
.data-box-4b3fae{
  background:url('../../../assets/images/2bg.png') no-repeat;
}
.data-box-365bbe{
  background:url('../../../assets/images/3bg.png') no-repeat;
}
.data-box-4e989e{
  background:url('../../../assets/images/4bg.png') no-repeat;
}
.data-box-732ac5{
  background:url('../../../assets/images/5bg.png') no-repeat;
}
.data-box-a51f9a{
  background:url('../../../assets/images/6bg.png') no-repeat;
}
.data-box{
  min-width: 158.333px;
  width: 13.5%;
  height: 86px;
  border-radius: 4px;
  margin-left: 20px;
  box-shadow: 0 2px 3.5px 0 #999;
  color: #fff;
  font-family: "微软雅黑",Regular;
  position: relative;
  overflow: hidden;
  background-size: cover;
}
</style>